<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <div id="a">疯狂Java讲义</div>
    <textarea id="b" row="3" cols='25'>轻量级Java EE企业应用到实战</textarea>
    <input type="button" value="访问2个元素" onclick="accessById()"/>
    <ol id="books">
        <!-- 第一个子节点:空白 -->
            <li id="java">疯狂Java讲义</li>
        <!-- 第二个子节点是java，第三个子节点是：空白 -->
            <li id="ssh">轻量级Java EE企业应用到实战</li>
            <li id="ajax" class="selected">疯狂Ajax讲义</li>
            <li id="xml">疯狂XML讲义</li>
            <li id="ejb">经典Java EE企业应用到实战</li>
            <li id="android">经典Java EE企业应用到实战</li>
        </ol>
        <input type="button" value="父节点"
            onclick="change(curTarget.parentNode);"/>	
            <input type="button" value="第一个"
            onclick="change(curTarget.parentNode.firstChild.nextSibling);"/>	
            <input type="button" value="上一个"
            onclick="change(curTarget.parentNode.previousSibling);"/>	
            <input type="button" value="下一个"
            onclick="change(curTarget.nextSibling.nextSibling);"/>	
            <input type="button" value="最后一个"
            onclick="change(curTarget.parentNode.lastChild.previousSibling);"/>
        <script type="text/javascript">
            var curTarget = document.getElementById("ajax");
            var change = function(target){
                alert(target.innerHTML);
            }
        </script>
</body>
</html>